- title '我的计划项'
.row#plans-list
  %template{'v-for' => 'plan in filterData'}
    .col-md-3
      %a{':href' => 'plan.path'}
        .bs-callout{':class' => 'plan.color_tag_class'}
          %h4
            {{plan.title}}
          %p
            {{plan.description}}

  .col-md-3{ 'v-show' => 'newPlanField' }
    .bs-callout.bs-callout-add#add-plan-field
      = render 'plans/form'
    .add-plan-buttons
      %button.btn.btn-sm.btn-default{ :type => "button", 'v-on:click' => 'cancelPlan()' } 取消
      %button.btn.btn-sm.btn-primary{ :type => "button", 'v-on:click' => 'addPlan()' } 提交
  .col-md-3{ 'v-show' => '!!!newPlanField' }
    .bs-callout.bs-callout-add#add-plan-entry{ 'v-on:click' => 'newPlan()' }
      %i.icon-plus.bs-callout-add-icon

:javascript
  var PlanUrl = '/p.json'
  var plans_list = new Vue({
    el: '#app',
    data: {
      plan: {
        title: '',
        description: '',
        color_tag: 0
      },
      plans: [{
        color_tag: '',
        color_tag_class: '',
        description: '',
        path: '',
        title: ''
      }],
      newPlanField: false,
      colorFilter: ''
    },
    created: function () {
      this.fetchData()
    },
    beforeUpdate: function () {
      $('.overlay-loading').hide()
    },
    computed: {
      filterData: function() {
        var data = this.plans
        var filterArray = []
        var filterStr = this.colorFilter
        if ( filterStr == ''){
          return data
        }else{
          for (var i = 0; i < data.length; i++){
            if ( data[i].color_tag == filterStr ){
              filterArray.push(data[i])
            }
          }
          return filterArray
        }
      }
    },
    methods: {
      fetchData: function () {
        var xhr = new XMLHttpRequest()
        var self = this
        xhr.open('GET', PlanUrl)
        xhr.onload = function () {
          self.plans = JSON.parse(xhr.responseText)
        }
        xhr.send()
      },
      newPlan: function () {
        this.newPlanField = true
      },
      cancelPlan: function () {
        this.newPlanField = false
      },
      selectColor: function (color){
        $('#add-plan-field').css({'border-left-color':color})
      },
      addPlan: function () {
        var xhr = new XMLHttpRequest()
        var self = this
        if (this.plan.title == ''){
          $('#title').css({'border-color':'#d9534f'})
          return notifyTop('计划项名称不能为空', 'warning');
        }
        xhr.open("POST", PlanUrl)
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
        xhr.onload = function () {
          result = JSON.parse(xhr.responseText)
          self.plans.push(result)
          self.newPlanField = false
          notifyTop('计划项 ' + self.plan.title + ' 创建成功!')
          self.plan.title = ''
          self.plan.description = ''
          $('#title').css({'border-color':'#ccc'})
        }
        xhr.send( "plan[title]="+ this.plan.title + "&plan[description]=" + this.plan.description + "&plan[color_tag]=" + this.plan.color_tag )
      }
    }
  })
